design-patterns-nuxt/pages/details/[id].vue

<template>
  <section class="flex flex-col items-center min-h-screen">
    <div class="container w-full p-6 max-w-6xl grow flex flex-col items-center">
      <div class="flex flex-col lg:flex-row">
        <img class="min-w-fit" :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
        <span class="ml-20 w-60">
          <h1 class="text-4xl font-bold leading-relaxed">
            {{ film.title }}
          </h1>
          <h2 class="text-2xl">
            {{ director }}
          </h2>
          <p class="my-8">
            {{ film.overview }}
          </p>
          <ul class="flex">
            <li v-for="star in film.credits.cast">
              {{ star.name }}
            </li>
          </ul>
          <ul>
            <li v-for="genre in film.genres">
              {{ genre.name }}
            </li>
          </ul>
          {{ film.vote_average }}
          {{ film.vote_count }}
        </span>
      </div>
      <div>
        <CommentForm :filmId="film.id" />
        <CommentList :filmId="film.id" />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const config = useRuntimeConfig()
const film = ref()
const route = useRoute()
const filmId = ref('')
const director = ref('')

filmId.value = route.params.id

if (filmId.value !== '') {
  const { data } = await useFetch(`/api/details/${filmId.value}`)
  film.value = data.value
  director.value = film.value.credits.crew.filter((member) => member.job === 'Director')
  director.value = director.value[0].name
}
</script>